<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>编辑知识库</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/assets/common/libs/layui/css/layui.css" media="all">
  <style>
    /* 自定义样式 */
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    .layui-container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .page-header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px 0;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .page-header h2 {
      color: #333;
      font-size: 24px;
      margin: 0;
      font-weight: 500;
    }

    .edit-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      margin-bottom: 30px;
    }

    .edit-card-header {
      background-color: #5FB878;
      color: #fff;
      padding: 15px 20px;
      font-size: 18px;
      font-weight: 500;
    }

    .edit-card-body {
      padding: 25px;
    }

    .layui-form {
      max-width: 100%;
    }

    .layui-form-item {
      margin-bottom: 25px;
    }

    .layui-form-label {
      font-weight: 500;
      color: #666;
      font-size: 14px;
      padding: 9px 15px;
    }

    .layui-input-block {
      margin-left: 105px;
    }

    .layui-input,
    .layui-textarea {
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.3s;
    }

    .layui-input:focus,
    .layui-textarea:focus {
      border-color: #5FB878 !important;
      box-shadow: 0 0 0 2px rgba(95, 184, 120, 0.2);
    }

    .layui-input::placeholder,
    .layui-textarea::placeholder {
      color: #bbb;
    }

    .editor-container {
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      overflow: hidden;
    }

    .layui-form-item .layui-btn {
      border-radius: 4px;
      padding: 0 25px;
      height: 42px;
      line-height: 42px;
      font-size: 14px;
      transition: all 0.3s;
    }

    .layui-form-item .layui-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .layui-form-item .layui-btn-primary:hover {
      border-color: #5FB878;
      color: #5FB878;
    }

    .form-actions {
      padding-top: 20px;
      border-top: 1px solid #f0f0f0;
      margin-top: 30px;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    /* 表单验证样式 */
    .layui-form-danger {
      border-color: #FF5722 !important;
    }

    .layui-form-danger:focus {
      box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.2) !important;
    }

    /* 加载动画 */
    .form-loading {
      text-align: center;
      padding: 40px 0;
      color: #999;
    }

    /* 适配移动端 */
    @media screen and (max-width: 768px) {
      .layui-input-block {
        margin-left: 0;
      }

      .layui-form-label {
        width: 100%;
        padding-left: 0;
        padding-bottom: 5px;
      }

      .form-actions {
        flex-direction: column;
      }

      .form-actions .layui-btn {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="layui-container">
    <div class="page-header">
      <h2>编辑知识库</h2>
    </div>

    <div class="edit-card">
      <div class="edit-card-header">编辑内容</div>
      <div class="edit-card-body">
        <form class="layui-form" id="editForm">
          <input type="hidden" id="editId">

          <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" id="editTitle" required lay-verify="required" placeholder="请输入标题"
                autocomplete="off" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
              <div class="editor-container">
                <textarea class="layui-textarea" id="editContent" style="display: none;"></textarea>
              </div>
            </div>
          </div>

          <div class="form-actions">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitForm">
              <i class="layui-icon">&#xe605;</i> 保存修改
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">
              <i class="layui-icon">&#xe600;</i> 取消
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="/assets/common/libs/layui/layui.js" charset="utf-8"></script>
  <script src="/assets/bi/knowledgeBase/wangEditor.js" charset="utf-8"></script>
  <script>
    layui.use(['layedit', 'form', 'jquery', 'layer'], function () {
      var layedit = layui.layedit
        , form = layui.form
        , $ = layui.jquery
        , layer = layui.layer;
      var id = getUrlParam('id') || '${id}'; layui.use(['layedit', 'form', 'jquery', 'layer'], function () {
        var layedit = layui.layedit
          , form = layui.form
          , $ = layui.jquery
          , layer = layui.layer;

        // 获取URL中的ID参数
        function getUrlParam(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        }

        // 构建富文本编辑器
        var contentEditor = layedit.build('editContent', {
          tool: ['strong', 'italic', 'underline', 'del', '|', 'fontFomatt', 'face', 'image', '|',
            'left', 'center', 'right', '|', 'link', 'unlink', '|', 'code', 'preview']
          , height: 450
          , uploadImage: {
            url: '/knowledgeBase/uploadImage', // 上传图片的接口
            type: 'post',
            field: 'file'
          }
        });

        // 页面加载时获取详情数据
        $(function () {
          // 正确获取ID：优先从URL参数获取，其次从model获取
          var id = getUrlParam('id') || '${id}';

          // 如果id是字符串'${id}'（表示没有从model获取到值），则将其设为null
          if (id === '${id}') {
            id = null;
          }

          if (id) {
            $('#editId').val(id);
            // 显示加载状态
            var index = layer.load(1, { shade: [0.1, '#fff'] });

            $.ajax({
              url: '/knowledgeBase/detail',
              type: 'get',
              data: { id: id },
              success: function (res) {
                layer.close(index);
                if (res.code === 0 && res.data) {
                  var knowledgeBase = res.data;
                  $('#editTitle').val(knowledgeBase.title);
                  layedit.setContent(contentEditor, knowledgeBase.content);
                  // 重新渲染表单
                  form.render();
                } else {
                  layer.msg('获取详情失败: ' + (res.message || '未知错误'));
                }
              },
              error: function () {
                layer.close(index);
                layer.msg('网络错误，请稍后重试');
              }
            });
          }
        });


      });

      // 表单提交
      form.on('submit(submitForm)', function (data) {
        // 获取标题
        var title = $('#editTitle').val();
        // 获取富文本内容
        var content = layedit.getContent(contentEditor);
        var id = $('#editId').val();

        // 表单验证
        if (!title || title.trim() === '') {
          $('#editTitle').addClass('layui-form-danger');
          layer.msg('请输入标题');
          return false;
        }

        if (!content || content.replace(/<[^>]+>/g, '').trim() === '') {
          layer.msg('请输入内容');
          return false;
        }

        // 显示加载状态
        var index = layer.load(1, { shade: [0.1, '#fff'] });

        // AJAX提交
        $.ajax({
          url: '/knowledgeBase/edit',
          type: 'POST',
          data: {
            id: id,
            title: title,
            content: content
          },
          success: function (res) {
            layer.close(index);
            if (res.code === 0 || res.success === true) {
              layer.msg('编辑成功', { icon: 1 }, function () {
                // 编辑成功后返回列表页
                window.location.href = '/knowledgeBase';
              });
            } else {
              layer.msg('编辑失败: ' + (res.msg || '未知错误'));
            }
          },
          error: function () {
            layer.close(index);
            layer.msg('网络错误，请稍后重试');
          }
        });

        return false; //阻止表单默认提交
      });

      // 取消按钮
      $('#cancelBtn').click(function () {
        layer.confirm('确定要取消编辑吗？未保存的修改将会丢失。', {
          btn: ['确定取消', '继续编辑'],
          icon: 3,
          title: '确认取消'
        }, function (index) {
          window.location.href = '/knowledgeBase';
          layer.close(index);
        });
      });

      // 输入框焦点事件，移除错误样式
      $('#editTitle').on('focus', function () {
        $(this).removeClass('layui-form-danger');
      });
    });
  </script>
</body>

</html>